<template>
  <div class="danmu-panel">
    <Collapse>
      <template #title>
        <div class="danmu-panel-title">
          <div class="">弹幕列表</div>
          <div class="iconfont icon-more"></div>
        </div>
      </template>
      <div class="danmu-list">
        <div class="danmu-title danmu-item">
          <div class="time">时间</div>
          <div class="content">发送内容</div>
          <div class="send-time">发送时间</div>
        </div>
        <el-scrollbar height="400px">
          <div
            v-for="(item, index) in danmuList"
            :key="item.danmuId"
            :class="['danmu-item', item.danmuId == selectDanmu?.danmuId ? 'active' : '']"
            @click="danmuSelect(item)"
          >
            <div class="time">{{ convertSecondsToHMS(item.time) }}</div>
            <div :title="item.text" class="content">{{ item.text }}</div>
            <div class="send-time">{{ item.postTime }}</div>
          </div>
          <NoData msg="暂无弹幕" v-if="danmuList.length == 0" />
        </el-scrollbar>
      </div>
    </Collapse>
  </div>
</template>

<script setup lang="ts">
import { mitter } from '@/eventbus/eventBus'
import type { Danmu, VideoDanmuListVO } from '@/services/api/video'
import { convertSecondsToHMS } from '@/utils/utilsFun'
import { onMounted, onUnmounted, ref } from 'vue'

const danmuList = ref<VideoDanmuListVO>([])
const selectDanmu = ref<Danmu>()
//点击弹幕
const danmuSelect = (item: Danmu) => {
  selectDanmu.value = item
}

onMounted(() => {
  mitter.on('loadDanmu', (data: any) => {
    data.sort((a: any, b: any) => {
      return a.time - b.time
    })
    console.log(data, '@@@@@@@@@@@')
    danmuList.value = data
  })
})

onUnmounted(() => {
  mitter.off('loadDanmu')
})
</script>

<style lang="less" scoped>
.danmu-panel {
  .danmu-panel-title {
    display: flex;
    align-items: center;
    .icon-more {
      margin-left: 10px;
    }
  }
  .danmu-list {
    .danmu-item,
    .danmu-title {
      padding: 0 10px;
      cursor: pointer;
      color: var(--text2);
      display: flex;
      font-size: 12px;
      text-align: left;
      line-height: 25px;
      .time {
        width: 50px;
      }
      .content {
        flex: 1;
      }
      .send-time {
        width: 130px;
      }
    }
    .active {
      background: #f4f4f5;
    }
  }
}
</style>
